 //初始化编辑器
    var testEditor;
    $(function() {
    testEditor = editormd("article-content", {
        width: "100%",
        height: "82vh",
        path: '/js/editormd/lib/',
        theme: "white",
        previewTheme: "white",
        editorTheme: "pastel-on-white",
        markdown: "",
        codeFold: true,
        saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
        searchReplace: true,
        //watch : false,                // 关闭实时预览
        htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
        //toolbar  : false,             //关闭工具栏
        //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
        emoji: true,
        taskList: true,
        tocm: true, // Using [TOCM]
        tex: true, // 开启科学公式TeX语言支持，默认关闭
        flowChart: true, // 开启流程图支持，默认关闭
        sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
        dialogLockScreen: false, // 设置弹出层对话框不锁屏，全局通用，默认为true
        dialogShowMask: false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
        dialogDraggable: false, // 设置弹出层对话框不可拖动，全局通用，默认为true
        dialogMaskOpacity: 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
        dialogMaskBgColor: "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/api/oss/upload?dir=blogs",
        onload: function () {
            var cacheContent = window.localStorage.getItem("kss_blog_content");
            if(cacheContent){
                testEditor.setMarkdown(cacheContent);
            }
        },
        onchange:function(){
            cacheBlog();
        }
    });

    // 同步缓存
    setCacheBlog()
});

 function setCacheBlog(){
     var title = window.localStorage.getItem("kss_blog_title");
     if(title){
         $("#article_title").val(title);
         app.blog.title = title;
     }

     var img = window.localStorage.getItem("kss_blog_img");
     if(img){
         $("#article-img").val(img);
         app.blog.img = img;
     }

     var desc = window.localStorage.getItem("kss_blog_desc");
     if(desc){
         $("#article-desc").val(desc)
         app.blog.description = desc;
     }

     var cid = window.localStorage.getItem("kss_blog_cid")
     if(cid){
         $("#category").find("option[value='"+cid+"']").prop("selected",true);
         app.blog.categoryId = cid;
     }
 }

 // 输入的时候同步缓存
 function cacheBlog(){
     window.localStorage.setItem("kss_blog_title",$("#article_title").val());
     window.localStorage.setItem("kss_blog_img",$("#article-img").val());
     window.localStorage.setItem("kss_blog_desc",$("#article-desc").val());
     window.localStorage.setItem("kss_blog_cid",$("#category").val());
     window.localStorage.setItem("kss_blog_content",testEditor.getMarkdown());
 }

 // 发表时清除缓存
 function removeBlog(){
     window.localStorage.removeItem("kss_blog_title");
     window.localStorage.removeItem("kss_blog_img");
     window.localStorage.removeItem("kss_blog_desc");
     window.localStorage.removeItem("kss_blog_cid");
     window.localStorage.removeItem("kss_blog_content");
 }

const app = Vue.createApp({
    // 数据模型
    data() {
        return {
            blog: {
                id: "", //新增的时候是null,修改时候是有具体的id
                title: "",
                categoryId: "1",
                categoryTitle: "Java",
                htmlcontent: "",
                content: "",
                description: "",
                img: "",
            },
            categoryList: []
        }
    },
    // 生命周期
    mounted() {
        var blogId = this.$refs.blogId.value;
        if (blogId) {
            this.blog.id = blogId;
            this.getBlog();
        }
    },
    created() {
        this.loadBlogCategory();
    },
    // 事件定义
    methods: {
        // 这个方法获取部门分类名称
        changeCategory(event) {
            var selectedIndex = event.target.selectedIndex;
            var options = event.target.options;
            this.blog.categoryTitle = options[selectedIndex].text

        },
        // obj取值
        getcategoryTitle(categoryId) {
            var obj = {};
            for (let i = 0; i < this.categoryList.length; i++) {
                obj[this.categoryList[i].id] = this.categoryList[i].categoryTitle;
            }
            console.log("obj---",obj)
            cacheBlog()
            return obj[categoryId];
        },
        // 根据id查询文章信息
        getBlog(callback) {
            axios.get("/api/blog/get/" + this.blog.id).then(res => {
                this.blog = res.data;
                setTimeout(() => {
                    var content =  res.data.content;
                    var cachecontent = window.localStorage.getItem("kss_blog_content") || "";
                    testEditor.setMarkdown(cachecontent.length > content.length?cachecontent:res.data.content);
                }, 300)
            })
        },
        // 发表
        saveBlog() {
            // 获取文本编辑器的内容
            this.blog.content = testEditor.getMarkdown(); //获取编辑器内容（不含html）
            this.blog.htmlcontent = testEditor.getHTML(); //获取编辑器html内容
            // 获取封面图片
            console.log(this.blog.img)
            this.blog.img = this.$refs.blogimg.value;
            console.log(this.blog.img)
            // 获取分类标题名称
            this.blog.categoryTitle = this.getcategoryTitle(this.blog.categoryId);
            // 执行异步请求
            axios.post("/api/blog/saveupdate", this.blog).then(res=>{
                if (this.blog.id) {
                    alert("修改成功");
                    // window.location.href = window.location.href;
                    window.location.href = "/api/detail/" + this.blog.id;
                    removeBlog()

                } else {
                    alert("添加成功");
                    window.location.href = "/?cid=" + this.blog.categoryId;
                    removeBlog()
                }
            })
        },

        // 查询分类信息
        loadBlogCategory: function () {
            axios.get("/api/category/load").then(res => {
                this.categoryList = res.data;
            })
        }
    }
}).mount("#app");

